<!DOCTYPE html>
<html
        xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords"
          content="t-io,tio,开源,netty,mina,rpc,jfinal,layui,hutool,osc,io,socket,tcp,nio,aio,nio2,im,游戏,java,长连接"/>
    <meta name="description" itemprop="description"
          content="t-io/tio是一个网络编程框架，也可以叫TCP长连接框架，从这一点来说是有点像netty的，但t-io为常见和网络相关的业务（如IM、消息推送、RPC、监控）提供了近乎于现成的解决方案，即丰富的编程API，极大减少业务层的编程难度。"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta charset="utf-8"/>
    <title>tio-ws演示</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
</head>

<body>
<div id="app">
    <div class="content">
        <div style="width: 480px; height: 430px; background: #d2d2d2; border: 1px solid #2d2d2d;overflow: auto;"
             id="contentId"></div>
    </div>

    <input name="text" id="textId" value=""/>
    <button id="sendButton">发送</button>
    <button id="clearButton">清空</button>

</div>


<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
<script th:inline="javascript">

    var receiver = "kefu1";//消息接收者：坐席ID
    var channel = "/user/queue/chat";// 通道标示，可根据区域+业务类型进行划分
    var token = "";// 排队标示 没有token时 进行申请分配，有token时 获取申请结果

    var stompClient = null;
    var username = "[[${user.username}]]";// 用户标示
    var userid = "[[${user.id}]]";// 用户标示
    var nickname = "[[${user.nickname}]]";//用户昵称

    console.log("username：" + username)
    console.log("userid：" + userid)


    $(function () {

        //转人工 -- >排队 --> 分配 -->
        connect();// 1.建立websocket连接


        //发送
        $("#sendButton").click(function () {
            var msg = $('#textId').val();
            var ty="text";
            var content = "{'type':'"+ty+"','content':'" + msg + "','toType':'USER','receiver':'"+receiver+"'}";
            stompClient.send("/chat", {}, content);
        });



    })
    /***
     * 座席签入
     */
    function checkIn() {

        //发送
        $("#sendButton").click(function () {
            var msg = $('#textId').val();
            var ty="text";
            var content = "{'type':'"+ty+"','content':'" + msg + "','toType':'USER','receiver':'"+receiver+"'}";
            stompClient.send("/chat", {}, content);
        });
    }

    /**
     * 建立连接
     */
    function connect() {
        var socket = new SockJS('/endpointChat');
        stompClient = Stomp.over(socket);
        //stompClient.heartbeat.outgoing = 2000;// 心跳检测间隔 2秒
        stompClient.connect({}, function (frame) {
                stompClient.subscribe(channel, function (message) {
                    var messageObj = JSON.parse(message.body);
                    //var customer = JSON.parse(messageObj.content);
                    console.log("messageObj。。。。：" + messageObj.content)

                    //receiver = customer.username;
                });
            },
            function errorCallBack(error) {
                console.log("连接失败：" + error)
                // 连接失败时（服务器响应 ERROR 帧）的回调方法
                //showMessageOS("连接失败或断开");
                // 失败重试，自动重连
            });
    }


    function showMsg() {

    }


</script>
</body>
</html>